<script setup>
import { onMounted, ref } from 'vue'
import OrderItem from './components/GiftOrderItem.vue'
import OrderType from "@/views/order/components/OrderType.vue";
import { giftOrderListApi } from "@/api/index.js";
const orderType = ref(1000)
const orderList = ref([])
const switchOrderType = (id) => {
  orderType.value = id;
  getOrderList()
}
const getOrderList = () => {
  giftOrderListApi({status: orderType.value===1000?'':orderType.value}).then(res=>{
    orderList.value = res.data
  })
}
const actionSuccess = () => {
  getOrderList()
}
onMounted(() => {
  getOrderList()
})
</script>

<template>
  <div class="order-page">
    <OrderType @switchOrderType="switchOrderType"/>
    <div class="order-list">
      <OrderItem v-for="order in orderList" :key="order.id" :order="order" @actionSuccess="actionSuccess"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-page {
  padding: 54px 0;
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>